<template>
  <div>
    <div class="head_">
      <el-button type="primary" size="small" @click="add">添加</el-button>
    </div>
    <div>
      <el-table :data="tableList" border>
        <el-table-column label="ID" width="50px">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="展示位置" align="center">
          <template slot-scope="scope">
            <span>{{getPosition(scope.row.position)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="center">
          <template slot-scope="scope">
            <span
              :style="{backgroundColor:scope.row.bgColor}"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.showStatus"
              :active-value="activeValue"
              :inactive-value="inactiveValue"
              @change="changeStatus(scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <div style="display:flex;">
              <el-button size="mini" @click="edit(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
            </div>

            <div style="margin-top:10px;display:flex;">
              <el-button type="success" size="mini" @click="query(scope.row.id)">查看</el-button>
              <el-button type="primary" size="mini" @click="addPro(scope.row.id)">添加</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" :visible.sync="addVisible" width="600px">
      <el-form :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="输入名称" v-model="form.name" style="width:350px" />
        </el-form-item>
        <el-form-item label="展示位置" prop="position">
          <el-select v-model="form.position" placeholder="请选择" :disabled="title=='编辑'">
            <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="orderBy">
          <el-input placeholder="输入排序" v-model="form.orderBy" style="width:350px" />
        </el-form-item>
        <el-form-item label="背景图片">
          <el-upload
            :action="action"
            :headers="header"
            list-type="picture"
            :limit="limit"
            :on-exceed="exceed"
            :file-list="fileList"
            :on-success="uploadSuccess"
            :on-remove="remove"
          >
            <el-button v-if="fileList.length==0" type="primary" size="small">上传图片</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="背景颜色">
          <el-color-picker v-model="form.bgColor"></el-color-picker>
        </el-form-item>

        <el-form-item label="状态" prop="showStatus">
          <el-switch
            v-model="form.showStatus"
            :active-value="activeValue"
            :inactive-value="inactiveValue"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div class="bottom_">
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="商品列表" :visible.sync="listVisible">
      <el-table :data="productList">
        <el-table-column label="ID" align="center" width="50px">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="主图" align="center">
          <template slot-scope="scope">
            <img style="width:50px;height:50px" :src="scope.row.mainImage" />
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            <span class="name">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status==0" style="color:#67C23A">正常</span>
            <span v-if="scope.row.status==1" style="color:#F56C6C">下架</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="rem(scope.row.id)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="添加商品" :visible.sync="seachVisible">
      <div style="display:flex;align-items: center">
        <div class="s_item">
          <label>商品ID</label>
          <el-input
            placeholder="商品ID"
            v-model="sform.productId"
            style="width:120px;margin-left:10px"
            clearable
          />
        </div>

        <div class="s_item">
          <label>商品名称</label>
          <el-input
            placeholder="商品名称"
            v-model="sform.name"
            style="width:120px;margin-left:10px"
            clearable
          />
        </div>
        <div class="s_item">
          <el-button type="primary" size="small" @click="searchProduct">搜索</el-button>
        </div>
      </div>
      <div style="margin:10px 0">
        <el-button type="primary" size="small" @click="addProduct">添加</el-button>
      </div>
      <el-table :data="searchList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="ID" align="center" width="50px">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="主图" align="center">
          <template slot-scope="scope">
            <img style="width:50px;height:50px" :src="scope.row.mainImage" />
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            <span class="name">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.stock}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="index"
          :page-size="pageSize"
          :page-sizes="[10,20]"
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  navigateList,
  add,
  del,
  productList,
  searchProduct,
  changeStatus,
  addProductToNavigate,
  removeProduct
} from "../../../api/navigate.js";
import { getToken } from "@/utils/auth.js";
export default {
  data() {
    return {
      searchList: [],
      productList: [],
      inactiveValue: 1,
      activeValue: 0,
      positions: [
        { id: 1, name: "爆款热销" },
        { id: 2, name: "店铺推荐" },
        { id: 3, name: "配件专区" },
        { id: 4, name: "新品上市" },
        { id: 5, name: "活动导航" },
        { id: 6, name: "为您推荐" }
      ],
      action: "",
      limit: 1,
      header: {},
      fileList: [],
      form: {
        id: null,
        name: "",
        bgColor: "#409EFF",
        orderBy: 0,
        position: null,
        bgImage: "",
        showStatus: 1
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        position: [{ required: true, message: "请选择", trigger: "change" }],
        orderBy: [{ required: true, message: "请选择", trigger: "blur" }]
      },
      title: "添加",
      addVisible: false,
      listVisible: false,
      seachVisible: false,
      tableList: [],
      addId: 0,
      index: 1,
      pageSize: 10,
      total: 0,
      queryId: 0,
      sform: {
        name: "",
        productId: null
      },
      idsStr: ""
    };
  },
  mounted() {
    this.initList();
    this.action = this.$UPLOAD;
    this.header = { token: getToken() };
  },
  methods: {
    getPosition(id) {
      var arr = this.positions;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
          return arr[i].name;
        }
      }
      return ''
    },

    rem(id) {
      removeProduct(id).then(res => {
        this.query(this.queryId);
      });
    },
    addProduct() {
      if (this.idsStr == "") {
        this.$message({
          type: "warning",
          message: "请选择"
        });
        return;
      }
      addProductToNavigate(this.addId, this.idsStr).then(res => {
        this.$message({
          type: "success",
          message: "添加成功"
        });
        searchProduct(
          this.index,
          this.pageSize,
          this.addId,
          this.sform.productId,
          this.sform.name
        ).then(res => {
          this.searchList = res.data.records;
          this.total = res.data.total;
        });
      });
    },
    handleSelectionChange(e) {
      this.idsStr = e.map(s => s.id).join("-");
    },
    changeStatus(id) {
      changeStatus(id).then(res => {
        this.initList();
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      searchProduct(
        this.index,
        this.pageSize,
        this.addId,
        this.sform.productId,
        this.sform.name
      ).then(res => {
        this.searchList = res.data.records;
        this.total = res.data.total;
      });
    },
    handleCurrentChange(page) {
      this.index = page;
      searchProduct(
        this.index,
        this.pageSize,
        this.addId,
        this.sform.productId,
        this.sform.name
      ).then(res => {
        this.searchList = res.data.records;
        this.total = res.data.total;
      });
    },
    searchProduct() {
      this.index = 1;
      this.pageSize = 10;
      searchProduct(
        this.index,
        this.pageSize,
        this.addId,
        this.sform.productId,
        this.sform.name
      ).then(res => {
        this.searchList = res.data.records;
        this.total = res.data.total;
      });
    },
    addPro(id) {
      this.seachVisible = true;
      this.addId = id;
      this.index = 1;
      this.pageSize = 10;
      searchProduct(this.index, this.pageSize, id, null, "").then(res => {
        this.searchList = res.data.records;
        this.total = res.data.total;
      });
    },
    query(id) {
      this.queryId = id;
      this.listVisible = true;
      productList(id).then(res => {
        this.productList = res.data;
      });
    },
    del(id) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del(id).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.initList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getNameByUrl(url) {
      let index = url.lastIndexOf("/");
      return url.substring(index + 1);
    },
    edit(data) {
      this.title = "编辑";
      this.fileList = [];
      if (data.bgImage != null && data.bgImage != "") {
        this.fileList.push({
          name: this.getNameByUrl(data.bgImage),
          url: data.bgImage
        });
      }
      this.form = {
        id: data.id,
        name: data.name,
        bgColor: data.bgColor,
        showStatus: data.showStatus,
        orderBy: data.orderBy,
        position: data.position
      };
      this.addVisible = true;
    },
    add() {
      this.title = "添加";
      this.form = {
        id: null,
        name: "",
        bgColor: "",
        orderBy: 0,
        position: null,
        showStatus: 1
      };
      this.fileList = [];
      this.addVisible = true;
    },
    /**
     * 初始化数据
     */
    initList() {
      navigateList().then(res => {
        this.tableList = res.data;
      });
    },
    save() {
      var bgImage = "";
      if (this.fileList.length != 0) {
        if (this.fileList[0].response != null) {
          bgImage = this.fileList[0].response.data;
        } else {
          bgImage = this.fileList[0].url;
        }
      }
      add(
        this.form.id,
        this.form.name,
        this.form.bgColor,
        this.form.showStatus,
        this.form.position,
        this.form.orderBy,
        bgImage
      ).then(res => {
        this.form = {
          id: null,
          name: "",
          bgColor: "",
          orderBy: 0,
          position: null,
          showStatus: 1
        };
        this.addVisible = false;
        this.initList();
      });
    },
    /**
     * 移除成功
     */
    remove(file, fileList) {
      this.fileList = fileList;
    },
    /**
     * 上传成功
     */
    uploadSuccess(response, file, fileList) {
      if (response.code === 2000) {
        this.fileList = fileList;
      } else {
        this.$message({
          type: "warning",
          message: response.message
        });
      }
    },

    /**
     * 超出图片限制
     */
    exceed() {
      this.$message({
        type: "warning",
        message: "超出限制"
      });
    }
  }
};
</script>

<style scoped>
.head_ {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.bottom_ {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
label {
  font-size: 14px;
  color: #606266;
}
.s_item {
  display: flex;
  margin: 10px;
  align-items: center;
}
.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
</style>
